<template>
	<view class="pupop">
		<view class="popup-box" :animation="animationData">
			<slot></slot>
		</view>
		<view @tap="close" @touchmove.stop.prevent :class="visible ? 'pupop-model' : 'pupop-models'"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: [],
				provinceList: [],
				cityList: [],
				areaList: [],
				indicatorStyle: `height: 50px;`,
				provinceIndex: 0,
				cityIndex: 0,
				areaIndex: 0,
				animationData: {},
				direction: 'bottom'
			}
		},
		props: {
			visible: {
				type: Boolean,
				default: () => false
			},
			maskCloseAble: {
				type: Boolean,
				default: () => true
			}
		},
		watch: {
			visible (val) {
				this.changeActive()
			}
		},
		created() {
		},
		methods: {
			confirm () {
				this.$emit('confirm')
			},
			cancel () {
				this.$emit('cancel')
			},
			// 点击模态框
			close () {
				if (this.maskCloseAble) {
					this.cancel()
				}
			},
			// 动画
			changeActive () {
				var active = '-315px'
				if (this.visible) {
					active = 0
				}
				var animation = uni.createAnimation({
					duration: 400,
					timingFunction: 'linear'
				})
				animation.bottom(active).step()
				this.animationData = animation.export()
			},
		}
	}
</script>

<style scoped lang="scss">
	.pupop {
		.popup-box {
			position: fixed;
			width: 100vw;
			left: 0;
			bottom: -315px;
			z-index: 99999;
			background: #fff;
			padding-bottom: 20px;
			border-top-right-radius: 10px;
			border-top-left-radius: 10px;
			.pupop-btn{
				height: 40px;
				display: flex;
				align-items: center;
				padding: 0 30upx;
				justify-content: space-between;
			}
		}
		.pupop-model {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 9999;
			background: rgba(0, 0, 0, .5);
		}
		.pupop-models{
			display: none;
		}
	}
</style>
